<template>
  <div class="box">
    <div class="top"></div>
    <ul class="h-ul">
      <router-link to="/idcard">
        <li>身份信息
          <van-icon name="arrow" />
        </li>
      </router-link>
    </ul>
    <van-collapse v-model="activeNames">
      <van-collapse-item title="身高体重" name="1">
        <ul>
          <li>身高：<input type="text"></li>
          <li>体重：<input type="text"></li>
        </ul>
      </van-collapse-item>
      <van-collapse-item title="过敏源" name="2">
        <ul>
          <li><input type="text" name="" id="" placeholder="请输入过敏源信息"></li>
        </ul>
      </van-collapse-item>
      <van-collapse-item title="遗传病史" name="3">
        <ul>
          <li><input type="text" name="" id="" placeholder="请输入遗传病病史"></li>
        </ul>
      </van-collapse-item>
      <van-collapse-item title="病历" name="4">
        <ul>
          <li><input type="text" name="" id="" placeholder="请提交病历"></li>
        </ul>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const activeNames = ref(['0']);
</script>

<style scoped lang="scss">
.box {
  background: url('../../public/image/login.png');
  background-size: cover;

  .top {
    height: 200px;
  }

  .h-ul {

    // background: #f0f8fe;
    li {
      height: 45px;
      border-top: 0.5px solid rgb(209, 208, 208, 0.5);
      line-height: 45px;
      font-size: 16px;
      position: relative;
      padding-left: 15px;

      // background: white;
      .van-icon {
        margin-top: 15px;
        position: absolute;
        right: 15px;

      }
    }
  }

  .van-collapse {
    .van-collapse-item {
      ul {
        li {
          height: 30px;

          input {
            border: none;
          }
        }
      }
    }

  }

  //   position: relative;
}
</style>